<template>
  <div class="wrapper">
    <dx-header-bar title="沉默客户专题"></dx-header-bar>
    <div class="container">
      <div class="item" v-for="(item,index) in dataList" :key="index">
        <div class="title">
          <span class="line"></span>
          <span class="name">{{item.lineType}}</span>
        </div>
        <dx-e-chart class="chart"
                    ref="chart"
                    :color="['#2f86f6']"
                    :show-legend="true"
                    :x-axis-vertical="true"
                    :x-axis-data="item.xAxisData"
                    :series="item.seriesData"
        ></dx-e-chart>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { DxHeaderBar, DxEChart } from '@/components';
import { Toast } from 'mand-mobile';
import { getSlient } from '@/api/resource';

export default {
  components: {
    DxHeaderBar,
    DxEChart
  },
  data() {
    return {
      timestamp: Number(this.$route.query.timestamp),
      lineList: ['互联网专线', '数据专线', '语音专线', 'apn专线', '短信专线'],
      dataList: []
    };
  },
  activated() {
    const time = Number(this.$route.query.timestamp);
    if (this.timestamp !== time) {
      this.loadSlientData();
    }
  },
  mounted() {
    this.loadSlientData();
  },
  methods: {
    loadSlientData() {
      Toast.loading('加载中...');
      Promise.all([
        getSlient('互联网专线'),
        getSlient('数据专线'),
        getSlient('语音专线'),
        getSlient('apn专线'),
        getSlient('短信专线')
      ]).then(resArr => {
        resArr.forEach((item, index) => {
          const xAxisData = [];
          const series = [];
          if (item.success) {
            item.data.forEach(list => {
              xAxisData.push(list.REGION);
              series.push(list.NUM);
            });
          }
          /* eslint-disable */
          item.xAxisData = [xAxisData];
          item.seriesData = [
            {
              name: '沉默客户数',
              type: 'line',
              data: series
            }
          ];
          item.lineType = this.lineList[index];
          /* eslint-enable */
        });
        this.dataList = resArr;
        this.$nextTick(() => {
          for (let i = 0; i < this.$refs.chart.length; i += 1) {
            this.$refs.chart[i].updateChart();
          }
        });
        Toast.hide();
      }).catch(error => {
        Toast.failed(error);
        console.log(error);
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .wrapper
    height: 100%
    display: flex
    flex-direction: column

  .container
    flex: 1
    overflow-y: auto
    padding-bottom: 100px

  .item
    margin-top: 30px

    .title
      background: #fff
      font-size: 32px
      font-weight: bold
      border-bottom: 1px solid #eee
      line-height: 40px
      padding: 20px
      display: flex
      align-items: center

      .line
        display: inline-block
        width: 8px
        margin-right: 20px
        border-radius: 8px
        background: #FF7F00
        height: 40px

  .chart
    height: 500px
</style>
